<template>
	<navBar :info='info'></navBar>
	<view class="page">
		<view class="title">
			和弦样式
			<image class="tip-icon" src="/static/image/faceConfig/bangzhu@2x.png"></image>
		</view>
		<view class="sec1">
			<image class="sec1-bg" src="/static/image/faceConfig/bg.png"></image>
			<view class="sec1-content">
				<image class="info-logo" src="/static/image/home/long-icon.png"></image>
				
				<view class="btn-wrap">
					<button class="btn long-btn active">长拨</button>
					<button class="btn short-btn">短拨</button>
				</view>
			</view>
		</view>
		<view class="sec2">
			<view class="sec2-box">
				<image class="bg" src="/static/image/faceConfig/guitar@2x.png"></image>
				<view class="box-text active">
					Guitar
				</view>
			</view>
			<view class="sec2-box">
				<image class="bg" src="/static/image/faceConfig/piano@2x.png"></image>
				<view class="box-text">
					Piano
				</view>
			</view>
			<view class="sec2-box">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					Bass
				</view>
			</view>
		</view>
		<view class="sec3">
			<view class="tab" :class="{active:item.value===tabKey}" v-for="item in tabs" :key="item.value" @click="handleTab(item.value)">{{item.label}}</view>
		</view>
		<view class="sec4">
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from '@/components/nav-bar/index.vue';

	const info =  ref(
		{
			sum:65,
			bpm:'BPM',
			air:'#F',
			tune:'C1',
		}
	)
	const tabs = [
		{
			label:'基础',
			value:1
		},
		{
			label:'分解',
			value:2
		},
		{
			label:'扫弦',
			value:3
		},
		{
			label:'技巧',
			value:4
		},
	]
	const tabKey = ref(1)
	const handleTab = (val)=>{
		tabKey.value = val
	}
	
</script>


<style lang="scss" scoped>
@import './index.scss';
</style>